<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="设置卡片号码信息" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="卡号" prop="card_number">
                <el-input v-model="dialogForm.card_number" />
            </el-form-item>
            <el-form-item label="过期月份" prop="expiry_month">
                <el-select v-model="dialogForm.expiry_month" placeholder="请选择过期月份">
                    <el-option label="01" value="01" />
                    <el-option label="02" value="02" />
                    <el-option label="03" value="03" />
                    <el-option label="04" value="04" />
                    <el-option label="05" value="05" />
                    <el-option label="06" value="06" />
                    <el-option label="07" value="07" />
                    <el-option label="08" value="08" />
                    <el-option label="09" value="09" />
                    <el-option label="10" value="10" />
                    <el-option label="11" value="11" />
                    <el-option label="12" value="12" />
                </el-select>
            </el-form-item>
            <el-form-item label="过期年份" prop="expiry_year">
                <el-select v-model="dialogForm.expiry_year" placeholder="请选择过期年份">
                    <el-option label="2024" value="2024" />
                    <el-option label="2025" value="2025" />
                    <el-option label="2026" value="2026" />
                    <el-option label="2027" value="2027" />
                    <el-option label="2028" value="2028" />
                    <el-option label="2029" value="2029" />
                    <el-option label="2030" value="2030" />
                    <el-option label="2031" value="2031" />
                    <el-option label="2032" value="2032" />
                    <el-option label="2033" value="2033" />
                    <el-option label="2034" value="2034" />
                    <el-option label="2035" value="2035" />
                    <el-option label="2036" value="2036" />
                    <el-option label="2037" value="2037" />
                    <el-option label="2038" value="2038" />
                    <el-option label="2039" value="2039" />
                    <el-option label="2040" value="2040" />
                </el-select>
            </el-form-item>
            <el-form-item label="卡CVV码" prop="cvv">
                <el-input v-model="dialogForm.cvv" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            card_id: "",
            card_number: "",
            expiry_month: "",
            expiry_year: "",
            cvv: "",
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "150px";
// 校验
const rules = {
    card_number: [{ required: true, message: "请输入卡片号码", trigger: "blur" }],
    expiry_month: [{ required: true, message: "请选择卡片过期月份，格式：01、02、12等", trigger: "blur" },],
    expiry_year: [{ required: true, message: "请选择卡片过期年份，格式：2025", trigger: "blur" },],
    cvv: [{ required: true, message: "请输入卡片背面3位CVV数字码", trigger: "blur" },],
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, {
                    card_id: dialogForm.card_id,
                    card_number: dialogForm.card_number,
                    expiry_month: dialogForm.expiry_month,
                    expiry_year: dialogForm.expiry_year,
                    cvv: dialogForm.cvv
                });
                emits("submitForm", param);
            } catch (error) {
                return false;
            }
        })
        .catch((error) => {
            return false;
        });
};
</script>
  